<template>
  <div class="edit-semester">
    <el-button
      type="warning"
      style="margin-bottom: 10px"
      @click="addSemseterData"
      >添加学期</el-button
    >
    <label style="padding-left: 100px">请选择当前主学期：</label>
    <el-select
      v-model="selectSemester"
      placeholder="请选择当前主学期"
      @change="changeSelect"
    >
      <el-option
        v-for="item in semesterTable"
        :key="item.id"
        :label="item.semesterName"
        :value="item.id"
      >
      </el-option>
    </el-select>

    <el-table
      :data="semesterTable"
      style="width: 100%"
      stripe
      border
      highlight-current-row
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column label="学期名称" min-width="25%">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.semesterName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学期起始日期" min-width="25%">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.semesterOriginDate
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学期总周数" min-width="25%">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.semesterWeekTotal
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="25%"
        >>
        <template slot-scope="scope">
          <el-button size="mini" @click="isShow(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deleteSemesterData(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="学期详情"
      :visible.sync="dialogFormVisible"
      append-to-body
      @close="resetForm"
    >
      <el-form :model="form" :rules="formRules" ref="formRef">
        <el-form-item label="学期名称" :label-width="formLabelWidth" prop="semesterName">
          <el-input v-model="form.semesterName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学期起始日期" :label-width="formLabelWidth" prop="semesterOriginDate">
          <el-date-picker
            v-model="form.semesterOriginDate"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="学习总周数" :label-width="formLabelWidth" prop="semesterWeekTotal">
          <el-input
            v-model="form.semesterWeekTotal"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSemesterData()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSemester,
  getSemesterById,
  editSemester,
  addSemester,
  deleteSemester,
  setMainSemester,
} from "@/api/adminEditSemester";
import { isConfirm } from "@/utils/confirm";
import * as dateTime from "@/utils/date-time";
export default {
  // 组件名称
  name: "editSemester",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      semesterTable: [],
      dialogFormVisible: false,
      form: {
        semesterName: "",
        semesterOriginDate: "",
        semesterWeekTotal: "",
        id: "",
      },
      formRules: {
        semesterName: [
          { required: true, message: "请输入学期名称", trigger: "blur" },
        ],
        semesterOriginDate: [
          { required: true, message: "请输入学期起始日期", trigger: "blur" },
        ],
        semesterWeekTotal: [
          { required: true, message: "请输入学期周数", trigger: "blur" },
        ],
      },
      formLabelWidth: "120px",
      selectSemester: "",
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  created() {
    this.onGetSemester();
  },
  mounted() {},
  // 组件方法
  methods: {
    //获取全部学期信息
    async onGetSemester() {
      const { data } = await getSemester();
      this.semesterTable = data.data.items;
      this.semesterTable.forEach((item) => {
        if (item.isCurrentSemester) {
          this.selectSemester = item.semesterName;
        }
      });
    },

    //点击编辑根据ID回显学期信息
    async isShow(data) {
      const { data: res } = await getSemesterById(data.id);
      this.form.semesterName = res.data.item.semesterName;
      this.form.semesterOriginDate = res.data.item.semesterOriginDate;
      this.form.semesterWeekTotal = res.data.item.semesterWeekTotal;
      this.form.id = res.data.item.id;

      this.dialogFormVisible = true;
    },

    //改变选中值更改主学期
    changeSelect() {
      this.semesterTable.forEach((item) => {
        if (item.id == this.selectSemester) {
          this.onSetMainSemester(item.id);
        }
      });
    },

    //改变主学期的请求接口
    async onSetMainSemester(id) {
      await setMainSemester(id);
      this.$message({
        message: "主学期更改成功",
        type: "success",
      });
    },

    //点击确定修改or添加学期信息
    async editSemesterData() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          if (this.form.id) {
            this.form.semesterOriginDate = dateTime.formDate(
              this.form.semesterOriginDate
            );
            this.form.semesterWeekTotal = Number(this.form.semesterWeekTotal);
            await editSemester(this.form);
          } else {
            this.form.semesterOriginDate = dateTime.formDate(
              this.form.semesterOriginDate
            );
            await addSemester(this.form);
          }
          this.dialogFormVisible = false;
          this.onGetSemester();
        }
      });
    },

    //关闭对话框 重置表单
    resetForm() {
      this.form.semesterName = "";
      this.form.semesterOriginDate = "";
      this.form.semesterWeekTotal = "";
      this.form.id = "";
    },

    //点击按钮显示对话框
    addSemseterData() {
      this.dialogFormVisible = true;
    },

    //点击删除按钮
    async deleteSemesterData(data) {
      if (await isConfirm("操作将删除该课程, 是否继续?")) {
        await deleteSemester(data.id);
        this.onGetSemester();
      }
    },
  },
};
</script> 

<style scoped lang='less'>
</style>
